<script>
import {
  accountRecordPage,
  orderDetailByCode,
  settleDetailsPage,
  settlePage
} from '@/api/mallApi/account'

export default {
  name: 'confirmSettlement',
  data() {
    return {
      value: '',
      formData: {
        mallName: '',
        status: '',
        payStatus: '',
        searchBeginTime: '',
        searchEndTime: ''
      },
      tableData: [],
      loading: false,
      drawerTableLoading: false,
      innerLoading: false,
      drawer: false,
      drawerData: {
        // 订单编号
        orderCode: '',
        // 结算状态 1：未确认2：已确认
        status: ''
      },
      drawerTableData: [],
      data: [],
      innerDrawer: false,
      innerData: [],
      innerTotal: 0,
      innerSize: 10,
      innerCurrent: 1,
      total: 0,
      size: 10,
      current: 1,
      drawerTotal: 0,
      drawerSize: 10,
      drawerCurrent: 1,
      settleId: '',
      orderNumber: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeDate(val) {
      if (val) {
        this.formData.searchBeginTime = val[0]
        this.formData.searchEndTime = val[1]
      } else {
        this.formData.searchBeginTime = ''
        this.formData.searchEndTime = ''
      }
    },
    getList() {
      this.loading = true
      const params = {
        ...this.formData,
        pageSize: this.size,
        pageNo: this.current
      }
      settlePage(params)
        .then((res) => {
          if (res.code === '00000') {
            this.loading = false
            this.tableData = res.data.rows
            this.total = res.data.totalRows
          }
        })
        .catch((err) => {
          this.loading = false
        })
    },
    handleView(val) {
      this.drawer = true
      this.settleId = val.id
      this.get()
    },
    get() {
      this.drawerTableLoading = true
      settleDetailsPage({
        settleId: this.settleId,
        pageNo: this.drawerCurrent,
        pageSize: this.drawerSize,
        ...this.drawerData
      })
        .then((res) => {
          if (res.code === '00000') {
            this.drawerTableLoading = false
            this.drawerTableData = res.data.rows
            this.drawerTotal = res.data.totalRows
          }
        })
        .catch((err) => {
          this.drawerTableLoading = false
        })
    },
    handleClose() {
      this.drawer = false
    },
    clear() {
      this.$refs.drawerData.resetFields()
      this.drawerData = {
        orderCode: ''
      }
    },
    handleOpen(val) {
      this.innerDrawer = true
      this.orderNumber = val.orderCode

      this.getOrder()
    },
    getOrder() {
      this.innerLoading = true
      accountRecordPage({
        orderNumber: this.orderNumber,
        pageNo: this.innerCurrent,
        pageSize: this.innerSize
      })
        .then((res) => {
          if (res.code === '00000') {
            this.innerLoading = false
            this.innerData = res.data.rows
            this.innerTotal = res.data.totalRows
          }
        })
        .catch((err) => {
          this.innerDrawer = false
        })
    },
    innerClose() {
      this.innerDrawer = false
    },
    handleInnerSizeChange(val) {
      this.innerSize = val
      this.getOrder()
    },
    handleInnerCurrentChange(val) {
      this.innerCurrent = val
      this.getOrder()
    },
    handleSizeChange(val) {
      this.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getList()
    },
    handleDrawerSizeChange(val) {
      this.drawerSize = val
      this.get()
    },
    handleDrawerCurrentChange(val) {
      this.drawerCurrent = val
      this.get()
    },
    handleExit() {
      this.drawer = false
    },
    handlePayment(val) {
      console.log('val: ', val)
      this.$confirm('是否确认打款？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          settleUpdate({
            id: val.id,
            status: 3
          })
            .then((res) => {
              if (res.code === '00000') {
                this.$message({
                  type: 'success',
                  message: '打款成功'
                })
                this.getList()
              }
            })
            .catch((err) => {
              this.$message({
                type: 'error',
                message: '打款失败'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消打款'
          })
        })
    },
    handleClick(row) {
      orderDetailByCode({
        orderCode: row.orderCode
      })
        .then((res) => {
          if (res.code === '00000') {
            this.data = res.data
          }
        })
        .catch((err) => {
          this.innerDrawer = false
        })
    }
  }
}
</script>

<template>
  <div class="confirmSettlement">
    <div class="table" style="margin-top: 40px; padding: 20px">
      <el-button
        icon="el-icon-refresh"
        circle
        @click="getList"
        style="margin-left: 90%; margin-bottom: 10px"
      ></el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        v-loading="loading"
        fit
        highlight-current-row
      >
        <!-- 序号 -->
        <el-table-column align="center" label="序号" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <!-- 周期 -->
        <el-table-column
          align="center"
          prop="period"
          label="周期"
        ></el-table-column>
        <!-- 结算金额 -->
        <el-table-column
          align="center"
          prop="money"
          label="结算金额"
        ></el-table-column>
        <!-- 操作 -->
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)"
            >查看明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="end"
        style="margin-top: 20px; margin-bottom: 20px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-row>
    </div>
    <div class="drawer">
      <el-drawer
        title="结算明细"
        :visible.sync="drawer"
        :with-header="true"
        size="80%"
        :before-close="handleClose"
      >
        <p style="margin-top: 20px; margin-left: 70px; margin-bottom: 10px">
          【结算价 = 买家实付 + 平台优惠券 + 积分抵扣 - 运费 - 退款积分 - 佣金 -
          分销返利 - 分享返利】
        </p>
        <el-form
          :inline="true"
          ref="drawerData"
          :model="drawerData"
          label-width="150px"
        >
          <el-form-item label="订单编号">
            <el-input
              style="width: 300px"
              clearable
              v-model="drawerData.orderCode"
              placeholder="订单编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="结算状态">
            <el-select
              style="width: 300px"
              v-model="drawerData.status"
              placeholder="结算状态"
              clearable
            >
              <el-option label="未确认" value="1"></el-option>
              <el-option label="已确认" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 160px">
            <el-button type="primary" @click="get"
            ><i style="margin-right: 6px" class="el-icon-search"></i>搜索
            </el-button>
            <el-button @click="clear">清空</el-button>
          </el-form-item>
        </el-form>
        <el-button
          icon="el-icon-refresh"
          circle
          @click="get"
          style="margin-left: 95%; margin-bottom: 10px"
        ></el-button>
        <div class="table">
          <el-table
            border
            v-loading="drawerTableLoading"
            :data="drawerTableData"
            style="width: 100%"
            @expand-change="handleClick"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table :data="data">
                  <el-table-column
                    label="商品大类名称"
                    prop=""
                  ></el-table-column>
                  <el-table-column
                    label="商品子类名称"
                    prop=""
                  ></el-table-column>
                  <el-table-column
                    label="商品小类名称"
                    prop=""
                  ></el-table-column>
                  <el-table-column
                    label="商品名称"
                    prop="goodsName"
                  ></el-table-column>
                  <el-table-column
                    label="商品规格"
                    prop="goodsSpecName"
                  ></el-table-column>
                  <el-table-column
                    label="商品数量"
                    prop="amount"
                  ></el-table-column>
                  <el-table-column
                    label="商品单价"
                    prop="price"
                  ></el-table-column>
                  <el-table-column label="佣金比例" prop=""></el-table-column>
                  <el-table-column label="主活动优惠" prop=""></el-table-column>
                  <el-table-column
                    label="附属活动优惠"
                    prop=""
                  ></el-table-column>
                  <el-table-column label="商家优惠券" prop=""></el-table-column>
                  <el-table-column label="运费" prop=""></el-table-column>
                  <el-table-column label="退款金额" prop=""></el-table-column>
                  <el-table-column
                    label="商品小计"
                    prop="subtotal"
                  ></el-table-column>
                  <el-table-column
                    label="买家实付金额"
                    prop=""
                  ></el-table-column>
                  <el-table-column label="平台优惠券" prop=""></el-table-column>
                  <el-table-column
                    label="积分抵扣金额"
                    prop=""
                  ></el-table-column>
                  <el-table-column
                    label="实际付款金额"
                    prop="subtotal"
                  ></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="订单编号"
              prop="orderCode"
            ></el-table-column>
            <el-table-column
              align="center"
              label="是否已确认收款"
              prop="status"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">未确认</span>
                <span v-if="scope.row.status == 2">已确认</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="总售价"
              prop="money"
            ></el-table-column>
            <!--            <el-table-column-->
            <!--              align="center"-->
            <!--              label="佣金额"-->
            <!--              prop=""-->
            <!--            ></el-table-column>-->
            <!--            <el-table-column-->
            <!--              align="center"-->
            <!--              label="分享返利金额"-->
            <!--              prop=""-->
            <!--            ></el-table-column>-->
            <!--            <el-table-column-->
            <!--              align="center"-->
            <!--              label="分销金额"-->
            <!--              prop=""-->
            <!--            ></el-table-column>-->
            <el-table-column align="center" label="订单状态" prop="orderStatus">
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == 1">未确认</span>
                <span v-if="scope.row.orderStatus == 2">已确认</span>
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--              align="center"-->
            <!--              label="支付方式"-->
            <!--              prop=""-->
            <!--            ></el-table-column>-->
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <!--                <el-button-->
                <!--                  type="text"-->
                <!--                  size="small"-->
                <!--                  @click="handleOpen(scope.row)"-->
                <!--                >对账单-->
                <!--                </el-button>-->
                <el-drawer
                  title="对账明细列表"
                  :append-to-body="true"
                  :before-close="innerClose"
                  :visible.sync="innerDrawer"
                  size="80%"
                >
                  <el-table border :data="innerData" v-loading="innerLoading">
                    <el-table-column
                      align="center"
                      label="三方交易订单号"
                      prop="thirdOrderNumber"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="交易类型"
                      prop="transactionType"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="交易时间"
                      prop="transactionTime"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="正常支付金额"
                      prop="payAmount"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="退款金额"
                      prop="refundAmount"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="商户订单号"
                      prop="orderNumber"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="交易来源"
                      prop="transactionSource"
                    ></el-table-column>
                  </el-table>
                  <el-row type="flex" justify="end" style="margin-top: 20px">
                    <el-pagination
                      background
                      @size-change="handleInnerSizeChange"
                      @current-change="handleInnerCurrentChange"
                      :current-page="innerCurrent"
                      :page-size="innerSize"
                      :page-sizes="[10, 20, 30, 40]"
                      layout="total, sizes, prev, pager, next"
                      :total="innerTotal"
                    ></el-pagination>
                  </el-row>
                </el-drawer>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 20px">
            <el-pagination
              background
              @size-change="handleDrawerSizeChange"
              @current-change="handleDrawerCurrentChange"
              :current-page="drawerCurrent"
              :page-size="drawerSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next"
              :total="drawerTotal"
            ></el-pagination>
          </el-row>
          <el-row type="flex" justify="center" style="margin-top: 60px">
            <el-button type="primary" @click="handleExit">关闭</el-button>
          </el-row>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<style scoped lang="scss">
.confirmSettlement {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
}
</style>
